<template>
  <div class="z_box">
    <!-- <van-row class="pos_box"></van-row> -->
    <van-row class="search_model" type="flex" justify="space-between" align="center">
      <van-col span="19">
        <van-row
          class="search_box"
          @click="$router.push({ name: 'search' })"
          type="flex"
          align="center"
        >
          <van-col>
            <i class="van-icon van-icon-search">
              <!---->
            </i>
          </van-col>
          <van-col>点击搜索</van-col>
        </van-row>
      </van-col>
      <van-row type="flex" justify="space-between" align="center">
        <van-col class="collection_icon">
          <van-icon name="filter-o" size="22" color="#C4C6C8" />
        </van-col>
        <van-col class="screening" @click="$router.push({ name: 'search' })">筛选</van-col>
      </van-row>
    </van-row>
    <!-- 内容区域+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="getVideoList">
      <!-- 热销商品列表 -->
      <div class="bot_box" v-for="(item ,index) in goodsVideoList" :key="index">
        <div class="box_shadow">
          <video-player
            width="100%"
            webkit-playsinline
            x5-playsinline
            x5-video-player-fullscreen="true"
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="playsinline"
            :options="getPlayerOptions(item.videoUrl,item.url)"
            @canplay="onPlayerCanplay($event)"
            @play="onPlayerPlay($event,index)"
          ></video-player>
        </div>
        <van-row class="goodsme" type="flex" justify="space-between">
          <!-- 商品名称 -->
          <van-col class="goodsname">{{item.name}}</van-col>
          <!-- 加入购物车 -->
          <van-col>
            <van-row type="flex" justify="space-between" align="center">
              <!-- <van-col class="collection_icon">
                <van-icon name="star-o" size="20" color="#C4C6C8" />
              </van-col>-->
              <van-col @click="pushDetails(item.link)" class="shop_cart">商品详情</van-col>
            </van-row>
          </van-col>
        </van-row>
        <!-- 商品简介 -->
        <van-row class="goods_info" style="word-wrap:break-word">{{item.content}}</van-row>
      </div>
    </van-list>
    <!-- <van-divider>没有更多了</van-divider> -->
  </div>
</template>
<script>
import { goodsVideoList, adList } from '@/api/api';
import { Card, Row, Col, Search, Divider, Icon, Toast, List } from 'vant';
import $ from 'jquery';

export default {
  name: 'sub-list',
  props: {
    category_id: {
      type: [String, Number]
    }
  },

  data() {
    return {
      goodsVideoList: [],
      page: 0,
      limit: 10,
      loading: false,
      finished: false,
      total: 0,
      pages: 0,
      playerList: []
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      this.page = 0;
      this.goodsVideoList = [];
      this.getVideoList();
    },

    // 解决同时播放问题
    onPlayerPlay(player) {
      var obj = {
        id: player.id_,
        player
      };
      var that = this.playerList;
      that.push(obj);
      for (let i = 0; i < that.length; i++) {
        if (that[i].id !== player.id_) {
          that[i].player.pause();
        }
      }
    },

    getPlayerOptions(src, poster) {
      return {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4',
            src
          }
        ],
        poster, //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此商品未传视频，请传入视频', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      };
    },
    pushDetails(link) {
      // this.$router.push(`/items/detail/${id}`);
      if (link == '') return Toast.fail('没有活动链接地址');
      this.$router.push({ path: link });
    },
    // 获取视频数据
    getVideoList() {
      // 为了解决重新获取数据页面.pause为null的问题
      this.playerList = [];
      this.page++;
      adList({ position: 21, limit: this.limit })
        .then(res => {
          this.goodsVideoList.push(...res.data.data.list);
          this.total = res.data.data.total;
          this.pages = res.data.data.pages;
          this.loading = false;
          if (this.pages == this.page) {
            this.finished = true;
          }
        })
        .catch(e => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },
    // 插件兼容操作
    onPlayerCanplay(player) {
      var ua = navigator.userAgent.toLocaleLowerCase();
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        $('body')
          .find('video')
          .attr('x-webkit-airplay', true)
          .attr('x5-playsinline', true)
          .attr('webkit-playsinline', true)
          .attr('playsinline', true);
      } else {
        // ios端
        $('body')
          .find('video')
          .attr('webkit-playsinline', 'true')
          .attr('playsinline', 'true');
      }
    }
  },

  components: {
    [List.name]: List,
    [Card.name]: Card,
    [Row.name]: Row,
    [Col.name]: Col,
    [Divider.name]: Divider,
    [Toast.name]: Toast
  }
};
</script>
<style lang="scss" scoped>
// 新的格式  =============================================================================
/deep/ .van-list__finished-text {
  height: 1px;
  margin: 20px 70px 20px 70px;
  border: 0.02px solid #e8e8e8;
}
.z_box {
  padding: 0 16px;
  background-color: #fff;
  // .pos_box {
  //   width: 100%;
  //   height: 30px;
  //   margin-top: 10px;
  // }
}
.search_box {
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #e7e9ec;
  // background-color: pink;
  padding-left: 15px;
  border-radius: 13px;
  border: solid 1px #e2e2e2;
  i {
    margin-top: 4px;
    font-size: 20px;
    height: 32px !important;
    color: #e4e2e2;
    line-height: 32px;
  }
}
.search_model {
  // position: fixed;
  // top: 10px;
  // left: 16px;
  // z-index: 100000;
  margin-top: 10px;
  width: 100%;
  height: 30px;
  // background-color: pink;
  .van-search {
    padding: 0 !important;
    border-radius: 10px;
    height: 26px;
  }
  .screening {
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    color: #9d9b9b;
  }
}
.collection_icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 25px;
  padding-right: 5px;
}
.van-search {
  border-radius: 50% !important;
}
.bot_box {
  margin-top: 10px;
  .goodsme {
    margin-top: 10px;
    .goodsname {
      height: 25px;
      font-size: 18px;
      font-weight: 700;
      line-height: 25px;
      letter-spacing: 0.5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .shop_cart {
      width: 80px;
      text-align: center;
      height: 25px;
      line-height: 25px;
      padding: 0 5px 0 10px;
      background-color: #f8f8f8;
      border-radius: 20px 0 0 20px;
      font-size: 14px;
      color: #ee3f00;
    }
  }
  .goods_info {
    margin-top: 2px;
    color: #9d9b9b;
    font-size: 12px;
    letter-spacing: 0.1;
  }
}
/deep/ .vjs-custom-skin > .video-js .vjs-big-play-button {
  font-size: 2em;
  margin-top: 6.5em !important;
}

/deep/.vjs-fluid {
  padding-bottom: 43.75%;
}

/deep/.vjs-poster {
  background-size: 100% 100%;
}

/deep/.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.video-js .vjs-play-control .vjs-icon-placeholder:before,
.vjs-icon-play:before {
  font-size: 2.5em; //播放按钮三角大小
}
//播放按钮绝对定位
/deep/.vjs-custom-skin > .video-js .vjs-big-play-button {
  top: 5%;
  left: 50%;
  height: auto;
  line-height: auto;
}

/deep/.video-js .vjs-big-play-button {
  font-size: 20px;
  line-height: 3em !important;
  height: 3em !important;
  width: 3em;
  opacity: 0.6;
  border-radius: 1.5em;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
</style>
